@use 'sass:map';
$light : () !default;
$light : ( // light theme
  '--color-white': #ffffff,
  '--color-black': #000000,
  '--color-primary': #0497e6,
  '--color-success': #67c23a,
  '--color-warning': #e6a23c,
  '--color-danger': #f56c6c,
  '--color-error': #f56c6c,
  '--color-info': #909399,

  '--color-bg-1': #fff,
  '--color-bg-2': #f5f5f5,
  '--color-primary-reverse': #fff,
  '--color-text-1': #000,
  '--color-text-2': #333,
  '--color-text-3': #666,
  '--color-menu-bg': #fff,
  '--color-menu-text': #7a7a7a,
  '--color-border-1': #ddd);
$dark : () !default;
// map.merge方法类似于Object.assign，用于合并两个map，如果有相同的key，后面的会覆盖前面的，但不会影响原map
// map.deep-merge方法与map.merge类似，但是如果value是map，会递归合并
$dark : map.deep-merge($light, ( // dark theme
    '--color-bg-1': #121212,
    '--color-bg-2': #000000,
    '--color-primary-reverse': #fff,
    '--color-text-1': #fff,
    '--color-text-2': #cfd3dc,
    '--color-menu-bg': #121212,
    '--color-menu-text': #7a7a7a,
    '--color-border-1': #2e2e2e));

html {

  @each $key,
  $value in $light {
    #{$key}: $value;
  }
}

html.dark {

  @each $key,
  $value in $dark {
    #{$key}: $value;
  }
}